import React, { useEffect, useState, useImperativeHandle, forwardRef, useMemo } from 'react'
import { Row, Col, Segmented, Button, Select, Space } from 'antd'
import TableDataBlock from '@/components/TableDataBlock';
import Modal from '@/components/SelectAdmin'
const setAdminList = (props) => {
    const {
        list = [],
        setList
    } = props


    const [visible, setVisible] = useState(false)
    const getColumns = [
        {
            title: '姓名',
            dataIndex: 'username',
        },
    ]
    const onChange = (e) => {
        setList(e)
    }
    const memo = useMemo(() => {

        return <Row gutter={[12, 24]}>
            <Col style={{ paddingRight: 4 }} span={24}>
                <Space style={{ display: 'flex', alignItems: 'flex-start' }}>
                    <div>绑定员工选择:</div>
                    <div style={{ width: 400 }}>
                        <TableDataBlock
                            cardProps={{
                                title: '绑定员工选择', extra: <Button onClick={() => {
                                    setVisible({
                                        show: true,
                                        title: '绑定员工选择',
                                        detail: {
                                            list: list,
                                        }
                                    })
                                }}>设置</Button>
                            }}
                            columns={getColumns}
                            rowKey={(record) => `${record.id}`}
                            list={list}
                            pagination={false}
                        ></TableDataBlock>
                    </div>
                </Space>
            </Col>
            <Modal onChange={(e) => onChange(e)} visible={visible} onClose={() => {
                setVisible(false)
            }}></Modal>
        </Row>


    }, [list, visible])
    return memo

}
export default forwardRef(setAdminList) 